<template>
  <div class="index">
    <top-banner />
    <div class="container main-index">
      <!-- 开班轮播列表 -->
      <section-box :classList="this.classList" />
      <!-- 训练营简介 -->
      <section-box1 :dispimage="this.dispimage" />
      <!-- 课程特色 -->
      <section-box2 />
      <!-- 行业应用 -->
      <section-box3 />
      <!-- 学后收获 -->
      <section-box4 />
      <!-- 学员反馈 -->
      <section-box5 :address="this.address" :weixinModel="this.weixinModel" />
      <!-- 课程分类 -->
      <section class="section_box6 container scroll" data-index="6" id="6">
        <span class="big_title flexcc">课程分类</span>
        <div class="content_box">
          <div class="course_list_box one">
            <div class="top_case flexcc">
              <div class="title">
                <p>岗位特训课</p>
                <p>独家研发 双重认证 连贯学习 阶梯提升</p>
              </div>
            </div>
            <ul class="course_list flexjs" data-type="0">
              <li class="flexccc" data-id="5">
                <span class="watch_btn card_img flexcc">
                  <img src="imgs/case1_course5.png?v=1.01" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    工业机器人基础调试工程师实训营（2周）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span>
                      工业机器人编程调试技术员，初/中级工业机器人应用工程师</span
                    >
                  </p>
                  <p class="text textControl flexjs">
                    <span>岗位课程</span>
                  </p>
                </div>
              </li>
              <li class="flexccc" data-id="3">
                <span class="watch_btn card_img flexcc">
                  <img src="imgs/case1_course4.png?v=1.0" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    西门子初级电气工程师实训营（2周）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span>
                      中级自动化工程师/PLC程序开发员/电气自动化工程师</span
                    >
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
              <li class="flexccc" data-id="1">
                <span class="watch_btn card_img flexcc">
                  <img src="imgs/case1_course1.png?v=1.0" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    西门子中级调试工程师实训营（3周）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 设备维护工程师/设备调试工程师</span>
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
              <li class="flexccc" data-id="4">
                <span class="watch_btn card_img flexcc">
                  <img src="imgs/case1_course3.png?v=1.0" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    西门子中级电气工程师实训营（4周）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> PLC程序员/电气工程师/高级调试工程师</span>
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
              <li class="flexccc" data-id="2">
                <span class="watch_btn card_img flexcc">
                  <img src="imgs/case1_course2.png?v=1.01" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    西门子初级调试工程师实训营（2周）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 初级自动化工程师/自动化调试工程师</span>
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <!-- 未上线模块 -->
          <div class="course_list_box two hide">
            <div class="top_case flexcc nun1">
              <div class="title">
                <p>全程系统课</p>
                <p>独家研发 双重认证 连贯学习 阶梯提升</p>
              </div>
            </div>
            <ul class="course_list flexjs">
              <li class="flexccc" data-id="">
                <span class="watch card_img text">
                  <img src="imgs/case3_course1.png" alt="" />
                </span>
                <div class="info_case flexccc">
                  <p class="textControl2 title">
                    西门子调试工程师实训营（基于S7- 200 SMART）
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="course_list_box three">
            <div class="top_case flexcc nun2">
              <div class="title">
                <p>个性定制课</p>
                <p>按月开课 时间灵活 提前预约 快速取证</p>
              </div>
            </div>
            <ul class="course_list flexjs" data-type="1">
              <li class="flexccc" data-id="1">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course1.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">小型自动化系统编程班（5天）</p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 助理小型自动化工程师</span>
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
              <li class="flexccc" data-id="2">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course2.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    小型自动化系统进阶班（5天4晚）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 初级小型自动化工程师</span>
                  </p>
                  <p class="text textControl flexjs"></p>
                </div>
              </li>
              <li class="flexccc" data-id="3">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course3.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">小型设备装调实训班（5天4晚）</p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 自动化调试工程师</span>
                  </p>
                  <p class="text textControl flexjs"></p>
                </div>
              </li>
              <li class="flexccc" data-id="4">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course4.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">工业机器人调试编程班（5天）</p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 初级工业机器人应用工程师</span>
                  </p>
                  <p class="text textControl flexjs"></p>
                </div>
              </li>
              <li class="flexccc" data-id="5">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course5.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    工业机器人调试进阶班（5天4晚）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span>
                      中级工业机器人应用工程师、中级工业机器人装调维护工程师</span
                    >
                  </p>
                  <p class="text textControl flexjs"></p>
                </div>
              </li>
              <li class="flexccc" data-id="6">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course6.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    全集成自动化系统编程班（5天）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 初级全集成自动化工程师</span>
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
              <li class="flexccc" data-id="7">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course7.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    全集成自动化系统进阶班（5天4晚）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 中级全集成自动化工程师</span>
                  </p>
                  <p class="text textControl flexjs"></p>
                </div>
              </li>
              <li class="flexccc" data-id="8">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course8.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">机器视觉应用实训班（5天）</p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 机械视觉应用与调试工程师</span>
                  </p>
                  <p class="text textControl flexjs"></p>
                </div>
              </li>
              <li class="flexccc" data-id="9">
                <span class="watch_btn card_img">
                  <img src="imgs/imgcourse/case2_course9.png" alt="" />
                  <span class="btn flexcc">查看详情</span>
                </span>
                <div class="info_case watch_btn flexccc">
                  <p class="textControl2 title">
                    非标自动化系统实训班（10天9晚）
                  </p>
                  <p class="post">
                    <span>目标岗位</span>
                    <span> 非标自动化设备装调工程师</span>
                  </p>
                  <p class="text textControl flexjs">
                    <span>取证课程</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <!-- 实训基地 -->
      <section class="section_box7 container scroll" data-index="7" id="7">
        <span class="big_title flexcc">实训基地</span>
        <p class="hint">
          1.18亿投资 &nbsp;&nbsp; 6000㎡实训场地 &nbsp;&nbsp; 8000万全新设备
        </p>
        <div class="content_box">
          <div class="scene_list">
            <!-- Swiper -->
            <swiper class="stack-up" v-bind:options="swiperFour">
              <swiper-slide
                v-for="(item, index) in shixunList"
                v-bind:key="index"
              >
                <img v-lazy="`imgs/shixunzhongxin (${item}).jpg`" />
              </swiper-slide>
              <!-- Add Pagination -->
              <div class="swiper-pagination swiper-pagination-white four"></div>
            </swiper>
            <!-- Navigation -->
            <div class="swiper-button-next swiper-button-blue four"></div>
            <div class="swiper-button-prev swiper-button-blue four"></div>
          </div>
          <div class="info_list flexjs">
            <!-- Swiper -->
            <swiper class="vidoeSwiper" v-bind:options="swiperFive">
              <swiper-slide>
                <div
                  class="item_case ioc_MP4 play_MP4"
                  data-src="mp4/shuchuangzhongxin1.mp4"
                >
                  <img src="imgs/vidoe_bg1.png" alt="" />
                  <span class="duration">01:22</span>
                  <p>【1】数创中心介绍</p>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div
                  class="item_case ioc_MP4 play_MP4"
                  data-src="mp4/shuchuangzhongxin1.mp4"
                >
                  <img src="imgs/vidoe_bg1.png" alt="" />
                  <span class="duration">01:22</span>
                  <p>【1】数创中心介绍</p>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div
                  class="item_case ioc_MP4 play_MP4"
                  data-src="mp4/shuchuangzhongxin1.mp4"
                >
                  <img src="imgs/vidoe_bg1.png" alt="" />
                  <span class="duration">01:22</span>
                  <p>【1】数创中心介绍</p>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div
                  class="item_case ioc_MP4 play_MP4"
                  data-src="mp4/shuchuangzhongxin1.mp4"
                >
                  <img src="imgs/vidoe_bg1.png" alt="" />
                  <span class="duration">01:22</span>
                  <p>【1】数创中心介绍</p>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div
                  class="item_case ioc_MP4 play_MP4"
                  data-src="mp4/shuchuangzhongxin1.mp4"
                >
                  <img src="imgs/vidoe_bg1.png" alt="" />
                  <span class="duration">01:22</span>
                  <p>【1】数创中心介绍</p>
                </div>
              </swiper-slide>
              <!-- Add Pagination -->
              <div class="swiper-pagination swiper-pagination-white five"></div>
            </swiper>
            <!-- Navigation -->
            <div class="swiper-button-next swiper-button-blue five"></div>
            <div class="swiper-button-prev swiper-button-blue five"></div>
          </div>
        </div>
      </section>
      <!-- 教学资质 -->
      <section class="section_box8 container scroll" data-index="8" id="8">
        <span class="big_title flexcc">教学资质</span>
        <p class="hint">西门子官方合作教学 颁发原厂证书认证</p>
        <div class="content_box">
          <div class="swiper-slide flexjs">
            <div class="itme flexccc">
              <span class="ico_case">
                <img src="imgs/png_cd01.png" alt="" />
              </span>
              <p class="info">西门子合作伙伴授牌</p>
            </div>
            <div class="itme flexccc">
              <span class="ico_case">
                <img src="imgs/png_cd02.png" alt="" />
              </span>
              <p class="info">西门子教学授权证书</p>
            </div>
            <div class="itme flexccc">
              <span class="ico_case">
                <img src="imgs/png_cd03.png" alt="" />
              </span>
              <p class="info">西门子课程教员证书</p>
            </div>
            <div class="itme flexccc">
              <span class="ico_case">
                <img src="imgs/png_cd04.png" alt="" />
              </span>
              <p class="info">西门子课程学员证书</p>
            </div>
          </div>
        </div>
      </section>
      <!-- 教学团队 -->
      <section class="section_box9 scroll" data-index="9" id="9">
        <span class="big_title flexcc">教学团队</span>
        <p class="hint">加速成长的路上，经验授课名师助你学习取证更顺畅</p>
        <div class="content_box container">
          <div class="content_case">
            <!-- Swiper -->
            <swiper class="teachers-img" v-bind:options="swiperNine">
              <div
                class="swiper-slide"
                v-for="(item, index) in teacherModel"
                :key="index"
                :style="{ backgroundImage: 'url(' + item.img + ')' }"
              >
                <div class="teacher-info">
                  <div class="case">
                    <p>{{ item.name }}</p>
                    <p>{{ item.title }}</p>
                    <p>
                      {{ item.introduce }}
                    </p>
                  </div>
                </div>
              </div>
            </swiper>
            <!-- Navigation -->
            <div class="swiper-button-next swiper-button-white nine"></div>
            <div class="swiper-button-prev swiper-button-white nine"></div>
          </div>
        </div>
      </section>
    </div>
    <service-bar />
    <question-bar />
    <nav-bar />
    <modal
      title="添加成功"
      sureText="查看购物车"
      btnType="3"
      modalType="middle"
      :showModal="showModal"
      v-on:submit="goToCart"
      v-on:cancel="showModal = false"
    >
      <template v-slot:body>
        <p>商品添加成功！</p>
      </template>
    </modal>
  </div>
</template>

<script>
import TopBanner from './../components/topBanner.vue'
import sectionBox from './../pages/sectionBox0.vue'
import sectionBox1 from './../pages/sectionBox1.vue'
import sectionBox2 from './../pages/sectionBox2.vue'
import sectionBox3 from './../pages/sectionBox3.vue'
import sectionBox4 from './../pages/sectionBox4.vue'
import sectionBox5 from './../pages/sectionBox5.vue'
import ServiceBar from './../components/ServiceBar.vue'
import questionBar from './../components/questionBar.vue'
import NavBar from './../components/NavBar.vue'
import Modal from './../components/Modal.vue';
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

export default {
  name: 'index',
  components: {
    TopBanner,
    sectionBox,
    sectionBox1,
    sectionBox2,
    sectionBox3,
    sectionBox4,
    sectionBox5,
    swiper,
    swiperSlide,
    ServiceBar,
    questionBar,
    NavBar,
    Modal
  },
  data() {
    return {

      swiperFour: {
        loop: true,
        loopedSlides: 2,
        initialSlide: '0',
        effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
        slidesPerView: 2, //可视化展示图片
        centeredSlides: true,
        spaceBetween: '-50%',
        autoplay: {
          delay: 3000, //自动播放速度
          disableOnInteraction: false //鼠标移上去时是否还继续播放
        },
        pagination: {
          el: '.swiper-pagination.four',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next.four',
          prevEl: '.swiper-button-prev.four',
        },
        coverflowEffect: {
          rotate: 0,
          // depth: 160,
          stretch: 20,
          depth: 180,
          modifier: 4,
          slideShadows: false,
        },
      },
      swiperFive: {
        slidesPerView: 4,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next.five',
          prevEl: '.swiper-button-prev.five',
        },
        watchSlidesProgress: true,
      },
      swiperNine: {
        slidesPerView: 5,
        spaceBetween: 24,
        slidesPerGroup: 5, //  分组  5个一组
        loopFillGroupWithBlank: true,
        loop: true,
        autoplay: {
          delay: 2500, //自动播放速度
          disableOnInteraction: false //鼠标移上去时是否还继续播放
        },
        navigation: {
          nextEl: ".swiper-button-next.nine",
          prevEl: ".swiper-button-prev.nine",
        },
      },

      shixunList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],//实训基地
      classList: [],//训练营开班列表
      dispimage: [],//数创照片集合
      weixinModel: [],//最新文章
      address: [],//学员合影
      teacherModel: [],//教师资料列表
      showModal: false,
    }
  },
  mounted() {
    this.getClassData();
  },
  methods: {
    getClassData() {
      let host = "https://apidata.jcpeixun.com/knowledge/list.aspx?";
      this.axios.get(host, {
        params: {
          func: 'getArticleDetail',
          id: 22944,
        }
      }).then((res) => {
        let { remark, dispimage, address } = res;//解构取值
        this.dispimage = dispimage.split(',');//格式转换
        this.address = address.split(',');//格式转换
        remark = eval('(' + remark + ')');//格式转换
        let { trainingModel, weixinModel, teacherModel } = remark;//解构取值
        this.classList = trainingModel;//训练营
        this.weixinModel = weixinModel;//最新文章
        this.teacherModel = teacherModel;//教师资料
      })
    },
    addCart(id) {
      this.showModal = true;
      this.axios.post('/carts', {
        productId: id,
        selected: true
      }).then((res) => {
        this.showModal = true;
        this.$store.dispatch('saveCartCount', res.cartTotalQuantity);
      }).catch(() => {
        this.showModal = true;
      });
    },
    goToCart() {
      this.$router.push('/cart');
    }
  }
}
</script>

<style lang="scss">
@import "./../assets/scss/config.scss";
@import "./../assets/scss/mixin.scss";
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
}
.index {
  .container {
    position: relative;
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
  }
  .main-index {
    padding-top: 122px;
    padding-bottom: 200px;
    section[class^="section_box"] {
      .big_title {
        position: relative;
        height: 47px;
        font-size: 36px;
        font-weight: 700;
        line-height: 47px;
        letter-spacing: 0.25px;
        color: #1c1c28;
        text-align: center;
      }

      .big_title::before {
        content: "";
        width: 30px;
        height: 23px;
        margin-right: 20px;
        background: url(/imgs/ico_title_left.png) no-repeat;
        background-size: 100%;
      }

      .big_title::after {
        content: "";
        width: 30px;
        height: 23px;
        margin-left: 20px;
        background: url(/imgs/ico_title_right.png) no-repeat;
        background-size: 100%;
      }

      .hint {
        margin-top: 12px;
        height: 32px;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.25px;
        color: #28293d;
        text-align: center;
      }
    }

    // 标题字体白色
    .text_white {
      .big_title {
        color: #ffffff !important;
      }

      .hint {
        color: #ffffff !important;
      }

      .big_title::before {
        background-image: url(/imgs/ico_title_left1.png) !important;
      }

      .big_title::after {
        background-image: url(/imgs/ico_title_right1.png) !important;
      }
    }

    .section_box6 {
      padding-top: 90px;

      .content_box {
        .course_list_box {
          margin-bottom: 66px;

          .top_case {
            justify-content: flex-start;

            .title {
              :first-child {
                font-size: 24px;
                line-height: 32px;
                color: #1c1c28;
              }

              :last-child {
                margin-top: 2px;
                font-size: 20px;
                line-height: 26px;
                color: #555770;
              }
            }
          }

          .top_case::before {
            content: "";
            width: 60px;
            height: 60px;
            margin-right: 17px;
            background: url(/imgs/title_ico1.png) no-repeat;
            background-size: auto 100%;
          }

          .nun1::before {
            background: url(/imgs/title_ico3.png) no-repeat center;
            background-size: auto 100%;
          }

          .nun2::before {
            background: url(/imgs/title_ico2.png) no-repeat center;
            background-size: auto 100%;
          }

          .course_list {
            margin-top: 24px;
            flex-wrap: wrap;

            li {
              justify-content: flex-start;
              width: 285px;
              height: 300px;
              background: #ffffff;
              border: 1px solid #c7c9d9;
              border-radius: 10px;
              transition: transform 0.3s;
              overflow: hidden;

              .hander {
                cursor: pointer;
              }

              .card_img {
                position: relative;
                width: 100%;
                cursor: pointer;
                display: block;
                img {
                  width: 100%;
                }
                .btn {
                  display: none;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 87px;
                  height: 30px;
                  line-height: 30px;
                  background: rgba(0, 0, 0, 0.3);
                  border: 1px solid #ffffff;
                  border-radius: 24px;
                  font-weight: 500;
                  font-size: 16px;
                  color: #ffffff;
                  text-align: center;
                  z-index: 1;
                }
              }

              .info_case {
                align-items: flex-start;
                justify-content: space-between;
                width: 100%;
                height: 100%;
                padding: 12px;

                > :first-child {
                  min-height: 44px;
                  font-size: 16px;
                  line-height: 22px;
                  color: #555770;
                  cursor: pointer;
                }

                .post {
                  span {
                    display: block;
                    font-size: 14px;
                    line-height: 19px;
                    color: #3e7bfa;
                    cursor: pointer;
                  }
                }

                > :last-child {
                  width: 100%;

                  span {
                    font-size: 14px;
                    line-height: 19px;
                    text-align: right;
                    color: #8f90a6;
                  }
                }
              }

              .btn {
                width: 100%;
                height: 40px;
                background: #ffffff;
                border: 1px solid #3e7bfa;
                box-sizing: border-box;
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                color: #3e7bfa;
              }

              .orange {
                color: #ff8800;
                background: #fff8e6;
              }

              .no_open {
                color: #fff;
                cursor: not-allowed; //禁用
                background: #c7c9d9;
              }
            }

            li:nth-of-type(4n) {
              margin-right: 0px;
            }

            li:nth-of-type(n + 5) {
              margin-top: 20px;
            }

            li:hover {
              -webkit-transform: translateY(-5px);
              -ms-transform: translateY(-5px);
              transform: translateY(-5px);
              box-shadow: 0px 11.9195px 17.8792px rgba(0, 0, 0, 0.06),
                0px 1.48993px 4.4698px rgba(0, 0, 0, 0.04),
                0px 0px 0.744966px rgba(0, 0, 0, 0.04);

              .card_img::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #000000;
                opacity: 0.5;
              }

              .btn {
                display: block !important;
              }
            }
          }
        }

        > :last-child {
          margin-bottom: 0px;

          .course_list {
            justify-content: flex-start;

            li {
              margin-right: 20px;
            }

            li:nth-of-type(4n) {
              margin-left: 0px;
            }
          }
        }
      }
    }
    .section_box7 {
      padding-top: 90px;
      padding-bottom: 60px;

      .content_box {
        width: 100%;
        margin-top: 41px;

        .scene_list {
          position: relative;
          padding: 0 32px;
          width: 100%;

          .stack-up {
            padding-bottom: 30px;
          }

          .swiper-button-prev:after {
            content: " ";
          }

          .swiper-button-next:after {
            content: " ";
          }

          .swiper-button-prev {
            width: 64px;
            height: 64px;
            left: 0px;
            background: url(/imgs/prev.png) 0px center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
          }

          .swiper-button-next {
            width: 64px;
            height: 64px;
            right: 0px;
            background: url(/imgs/next.png) 0px center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
          }

          img {
            width: 100%;
            height: 550px;
            box-shadow: 0px 4px 8px rgba(58, 55, 54, 0.25),
              0px 12px 24px rgba(112, 110, 109, 0.5);
            border-radius: 20px;
          }
        }

        .info_list {
          position: relative;
          margin-top: 90px;
          padding: 0 32px;

          .item_case {
            position: relative;
            border-radius: 16px;
            cursor: pointer;

            .duration {
              position: absolute;
              top: 128px;
              right: 12px;
              font-size: 12px;
              line-height: 16px;
              letter-spacing: 0.25px;
              color: #ffffff;
            }

            P {
              margin-top: 10px;
              font-size: 16px;
              line-height: 21px;
              letter-spacing: 0.25px;
              color: #000000;
            }

            img {
              border-radius: 16px;
            }
          }

          .item_case::before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-top: 16px solid transparent;
            border-left: 28px solid #fff;
            border-bottom: 16px solid transparent;
          }

          .swiper-button-prev:after {
            content: " ";
          }

          .swiper-button-next:after {
            content: " ";
          }

          .swiper-button-prev {
            width: 64px;
            height: 64px;
            top: 40%;
            left: 0px;
            background: url(/imgs/prev.png) 0px center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
          }

          .swiper-button-next {
            width: 64px;
            height: 64px;
            top: 40%;
            right: 0px;
            background: url(/imgs/next.png) 0px center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
          }
        }
      }
    }
    .section_box8 {
      padding-top: 30px;
      padding-bottom: 60px;

      .content_box {
        padding-top: 48px;

        .itme {
          justify-content: flex-end;

          .ico_case {
            width: 280px;
            height: 202px;
            padding: 10px;
            background: #ffffff;
            box-shadow: 0px 2px 4px rgba(40, 41, 61, 0.04),
              0px 8px 16px rgba(96, 97, 112, 0.16);
            border-radius: 12px;
          }

          p {
            margin-top: 12px;
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.25px;
            color: #555770;
          }
        }
      }
    }
    .section_box9 {
      padding-top: 30px;
      padding-bottom: 60px;

      .content_box {
        position: relative;
        margin-top: 40px;

        .content_case {
          position: relative;

          .swiper-container {
            width: 100%;
            padding-top: 10px;
            height: 300px;
          }

          .swiper-slide {
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: center;
            transition: transform 0.3s;

            .teacher-info {
              display: none;
              padding: 20px 5px 13px 12px;
              font-size: 16px;
              line-height: 150%;
              color: #ffffff;
              height: 100%;
              background: rgba(0, 0, 0, 0.5);
              border-radius: 20px;

              .case {
                padding-right: 5px;
                height: 100%;
                overflow-y: auto;

                p {
                  margin-top: 8px;
                }
              }
            }
          }

          .swiper-slide:hover {
            z-index: 10;
            transform: translateY(-5px);

            .teacher-info {
              display: block;
            }
          }

          .case::-webkit-scrollbar {
            width: 3px;
            height: 3px;
            background: #d9d9d94f;
            border-radius: 2px;
          }

          .case::-webkit-scrollbar-thumb {
            background: #d9d9d9;
            border-radius: 2px;
            cursor: pointer;
          }

          .swiper-button-prev:after,
          .swiper-button-next:after {
            content: " ";
          }

          .swiper-button-prev {
            width: 64px;
            height: 64px;
            top: 50%;
            left: -50px;
            background: url(/imgs//prev.png) 0px center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
          }

          .swiper-button-next {
            width: 64px;
            height: 64px;
            top: 50%;
            right: -50px;
            background: url(/imgs//next.png) 0px center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
          }
        }
      }
    }
  }
}
</style>